<template>
    <div>
        <h1>科室页面</h1>
        <div>
            科室名称：<input type="text" v-model="info.name" >
            创建时间：
            <input type="date" v-model="info.time1">
            -
            <input type="date" v-model="info.time2">
            <input type="button" value="查询" @click="getlist" />
            <input type="button" value="重置" @click="show1" />
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>科室名称</td>
                    <td>科室人数</td>
                    <td>备注</td>
                    <td>创建时间</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.name }}</td>
                    <td>{{ item.renShu }}</td>
                    <td>{{ item.text }}</td>
                    <td>{{ moment(item.time).format('YYYY-MM-DD HH:mm:ss') }}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="update(item.id)">修改</button>
                    </td>
                    
                </tr>
            </tbody>
        </table>
    </div>
    <div>
      <!-- 显示 -->
      <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >
      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >
      <!-- 分页  全都是改是页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">{{
        item
      }}</span>
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
      <!-- 这个改的页容量  -->
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    name: '',
    time1: '',
    time2: '',
   
})
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0, 
})
let arr = [2, 5, 10, 20];
let ids:any = ref([]);
onMounted(() => {
    getlist(); 
})
const goPage = (num: any) => {
    
    if (num < 1) {
       info.pageIndex = 1;
       return;

    }
    if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return  ; 
    }
    info.pageIndex = num;
    getlist();
    return;
}
const show = () => {
    info.pageIndex = 1;
    getlist();
}
const getlist = () => {
    axios({
        url: '/api/yisheng/Getkeshi',
        method: 'get',
        params: info
    }) 
    .then(res => {
       data.list=res.data.list;
       data.totalCount=res.data.totalCount;
       data.totalPage=res.data.totalPage; 
    })
    .catch(err => {
       console.log(err);
   })
}
const show1 = () => {
   info.name = '';
   info.time1 = '';
   info.time2 = '';
   info.pageIndex = 1;
   getlist(); 
}

const del = (id: any) => {
   var f=confirm('确定要删除吗？')
   if(f){
      axios({
        url: '/api/yisheng/delkeshi',
        method: 'get',
        params: { id: id }
    }) 
   .then(res => {
        if(res.data>0){
            alert('删除成功')
            getlist();
        }
        else{
            alert('删除失败')
            return;
        }
    })
  .catch(err => {
        console.log(err);
    })  
   }
 
}
const update = (id: any) => {
    router.push({ path: '/updatekeshi', query: { id: id } }) 
}

</script>

<style scoped>

</style>